<template>
  <view class="loading-wrap">
    <view class="loading-content" v-if="show">
      <view class="title-loading">AITEWAN</view>
      <view class="open-all" hover-class="hover-bubble">
        <view class="power"> </view>
        <view class="text">
          <view> loading... </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      from: '',
      to: '',
      id: '',
      box_id: '',
      page: {
        list: '/pages/index/two_open_components/things-list',
        // 直播
        live: '/pages/rewardGoods/live/live',
        // 竖屏
        yfs: '/pages/rewardGoods/portrait/index',
        luckybag: '/pages/fukubukuro/extract/extract',
        full_open: '/pages/fullopen/fullopen',
      },
      change: false,
      show: false,
      finished: false,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e = {}) {
    console.log('onload');
    // uni.preloadPage({
    //   url: '/pages/rewardGoods/portrait/index',
    //   complete: (res) => {
    //     console.log(res);
    //   },
    // });
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.show = true;
    let { id, box_id, from, to } = this.$Route.query || {};
    this.to = to;
    this.from = from;
    if (!this.change) {
      this.id = id;
      this.box_id = box_id;
    }

    // let pageList = getCurrentPages();
    // // route
    // let previous_page = pageList[pageList.length - 2];
    setTimeout(() => {
      if (!this.finished) {
        this.finished = true;
        this.$Router.push({
          path: `${this.page[this.to]}`,
          query: {
            id: this.id,
            box_id: this.box_id,
          },
        });
      } else if (this.from == 'list') {
        this.$Router.replace({
          path: `/pages/public/white`,
          query: {
            path: `${this.page['list']}?type=${this.to}`,
          },
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    }, 1200);
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {
    uni.$on('live_yfs', (res) => {
      this.change = true;
      this.box_id = res.box_id || 0;
    });
  },
  // 监听页面隐藏
  onHide() {
    this.show = false;
  },
  // 监听页面卸载
  onUnload() {
    uni.$off('live_yfs');
  },
  methods: {},
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.loading-content {
  position: absolute;
  top: calc(50% - 250rpx);
  left: calc(50% - 250rpx);
  width: 500rpx;
  height: 500rpx;
  // animation: bounce-out-zoomin 0.7s linear 1s 1 normal forwards;
}
.loading-wrap {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  --letter: 16rpx;
}
.title-loading {
  margin: 0 auto 10rpx;
  width: 464rpx;
  text-align: center;
  font-weight: 600;
  font-size: 32rpx;
  letter-spacing: var(--letter);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgba(169, 82, 217, 1),
    rgb(243, 141, 45)
  );
  animation: focus-in-expand 0.6s linear 0s 1 normal none;
}
.open-all {
  margin: 0 auto;
  overflow: hidden;
  width: 464rpx;
  height: 60rpx;
  border-radius: 80rpx;
  border: 2rpx solid #8831fc;
  background-color: rgba(148, 86, 223, 0.22);
  position: relative;
  .power {
    transform: translateX(-100%);
    position: relative;
    left: -5rpx;
    width: 474rpx;
    height: 100%;
    overflow: hidden;

    border-radius: 14rpx;
    box-shadow: 0 3rpx 6rpx 6rpx rgba(255, 255, 255, 0.4) inset;
    transition: all 0.4s;
    animation: progress-max 0.7s linear 0.4s 1 normal forwards;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );

      background-size: 30rpx 30rpx;
      animation: progress-bar-stripes 2s linear 0s infinite normal none;
    }
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
        90deg,
        rgba(169, 82, 217, 1),
        rgba(70, 197, 204, 1),
        rgba(116, 92, 232, 1)
      );
      box-shadow: 0 3rpx 8rpx rgba(255, 255, 255, 0.45) inset;
    }
  }
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 33rpx;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
    view {
      line-height: 1;
    }
  }
  .count {
    margin-top: 6rpx;
    font-size: 21rpx;
    font-weight: 600;
    color: #ffffff;
    line-height: 20rpx;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30rpx 0;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    letter-spacing: var(--letter);
    opacity: 1;
  }
}
@keyframes progress-max {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes bounce-out-zoomin {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  5% {
    transform: scale(1.04);
    animation-timing-function: ease-in;
  }
  10% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  20% {
    transform: scale(1.24);
    animation-timing-function: ease-in;
  }
  30% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  45% {
    transform: scale(1.5);
    animation-timing-function: ease-in;
  }
  65% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  100% {
    transform: scale(7);
    animation-timing-function: ease-in;
    opacity: 0;
  }
}
</style>
